<template>
  <div>
    <span>modelValue：</span>
    <input v-model="modelValue" />
    <span> 测试defineModel：</span>
    <input v-model="title" type="text" />
    <button @click="clickB">点击</button>
  </div>
</template>
<script setup lang="ts">
import { defineModel } from 'vue'
// defineModel的用法 3.4+可用
//defineModel 是一个便利宏。编译器将其展开为以下内容：

//一个名为 modelValue 的 prop，本地 ref 的值与其同步；
//一个名为 update:modelValue 的事件，当本地 ref 的值发生变更时触发。

// defineModel 相当于defineProps 和 defineEmits 的组合，子组件更改直接更改了父元素的值

const modelValue = defineModel<string>({ default: '测试' })
const title = defineModel<string>('title', { required: true })
const clickB = () => {
  modelValue.value = '改变了默认的modelValue：'
}
</script>
